<template>
    <div class="industrial-structure">
        <div class="titleBox">
            <div class="titleLeft"></div>
            <div class="titleRight"></div>
            <div class="titleCenter">汽车企业数量统计</div>
        </div>
        <div class="quantity-statistics">
            <chart-block chartID="chart1" :title="optionData.title" :optionData="optionData" chartType="getStackBar" height="36vh" :dispatchData="dispatchData" @mouseover="Amouseover" @mouseout="Amouseout"></chart-block>
            <chart-block chartID="chart2" :title="BorderPieOptionData1.title" :optionData="BorderPieOptionData1" chartType="getRosePie" height="36vh" style="padding:0 1vh 3vh 0;"></chart-block>
            <!-- <chart-block chartID="chart2" :title="BorderPieOptionData1.title" :optionData="BorderPieOptionData1" chartType="getBorderPie" height="30vh"></chart-block> -->
            <chart-block
                chartID="chart3"
                :title="BorderPieOptionData2.title"
                :optionData="BorderPieOptionData2"
                chartType="getRosePie"
                height="30vh"></chart-block>
        </div>
        <div class="panorama">
            <div class="titleBox">
                <div class="titleLeft"></div>
                <div class="titleRight"></div>
                <div class="titleCenter">{{ industryType }}全景图</div>
            </div>
            <iframe style="border: 0px solid;" :src='getImgUrl()' width="100%" height="550px" ></iframe>
            <!-- <graph-view :xml-data="xmlData" ref="graph" style="height:530px; margin-bottom:3vh "/> -->
        </div>
        <el-row>
            <el-col span="12" :gutter="20">
                <div class="table">
                    <table-block
                        :oprData="oprData"
                        :pageSize="pageSize"
                        :total="total"
                        height="365"
                        @currentChange="currentChange"
                        :currePage="current"
                        @cellClick="cellClick"
                    ></table-block>
                </div>
            </el-col>
            <el-col span="12" :gutter="20">
                <!-- 地图显示区域 -->
                <div class="map" style="height:400px">
                    <!--                        <mapv-block-->
                    <!--                            :pointList = "pointList"-->
                    <!--                            :center="center"-->
                    <!--                            :zoom="zoom"/>-->
                    <mapvBlockPoint :pointList="pointList" :redicon="redicon" :center="centerPoint" :zoom="zoomPoint" @markerClick="markerClick"/>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getindustryData, getCommonData10, getindustryData1, getCommonDataSearch} from "@/api/pages";

export default {
    name: "industrial-structure",
    props: {
        industryType: {
            type: String,
            default: '汽车产业'
        }
    },
    components: {
        ChartBlock: () => import('@/components/chart-block'),
        TableBlock: () => import("@/components/table-block"),
        mapvBlockPoint: () => import('@/components/mapv-block-point'),
    },
    data() {
        return {
            optionData: {
                title: '',
                categoryAxis: [],
                seriesData: [
                    {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    },
                ],
                color: ["#F4A95B", "#6363FF", "#00BEFC"],
                legendSize: 14
            },
            BorderPieOptionData: {},
            BlockLineOptionData: {
                seriesData: [
                    {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    },
                ],
                LinearGradientColor: [//柱状图渐变色
                    {
                        topColor: '#47FFBC',
                        bottomColor: '#0DCCFF'
                    },
                ],
            },
            BorderPieOptionData1: {},
            BorderPieOptionData2: {},
            dispatchData: {},
            dispatchData1: {},
            dispatchData2: {},
            xmlData: null,
            oprData: {},
            pageSize: 10,
            cylb: '房地产',
            total: 0,
            current: 1,
            centerPoint: {lat: 29.5, lng: 106.3},
            zoomPoint: 8,
            pointList: [],
            redicon: 'red'
        }
    },
    created() {

    },
    mounted() {
        console.log(1)
        this.comOfIndusStrScale()
        this.getindustryData1('E012', this.cylb)
        this.getindustryData('E011', this.cylb)
        // this.showGraph(this.industryType)
        this.getCompanyList()
        this.getMapPoint()
    },
    methods: {
        cellClick({row, column, cell, event}){
            sessionStorage.setItem('companyName', row.name)
            this.$router.push({
                path:'/enterprise/tabswich?tabIndex=0&companyId='+row.qyId
            })
        },
        markerClick({item}) {
            sessionStorage.setItem('companyName', item.name)
            this.$router.push({
                path:'/enterprise/tabswich?tabIndex=0&companyId='+item.qyId
            })
        },
        getImgUrl() {
            return '/cqjj/mxgraph/javascript/cqjj.html?industryType=' + this.industryType;
        },
        //产业结构规模对比comparisonOfIndustrialStructureScale
        comOfIndusStrScale() {
            getCommonData10({busiCode: 'Y002', industryType: this.industryType}).then(res => {
                if (res.data.code === 200) {
                    this.optionData.title = res.data.data.title
                    this.optionData.categoryAxis = res.data.data.categoryAxis
                    this.optionData.seriesData = res.data.data.seriesData
                }
                console.log('11111111111', this.optionData)
                if (this.industryType == '汽车产业') {
                    this.optionData.seriesData[0].name = '零部件及系统'
                    this.optionData.seriesData[1].name = '整车制造'
                    this.optionData.seriesData[2].name = '流通及应用'
                } else if (this.industryType == '电子产业') {
                    this.optionData.seriesData[0].name = '原材料和零组件'
                    this.optionData.seriesData[1].name = '关键元器件'
                    this.optionData.seriesData[2].name = '应用商品'
                } else if (this.industryType == '医药产业') {
                    this.optionData.seriesData[0].name = '原材料供给与研发'
                    this.optionData.seriesData[1].name = '医药产品生产与制造'
                    this.optionData.seriesData[2].name = '医药流通与服务'
                }
            }).catch(err => {
            })
            getCommonData10({busiCode: 'Y003', industryType: this.industryType}).then(res => {
                if (res.data.code === 200) {
                    let MaxArr = []
                    let _this = this
                    res.data.data.seriesData[0].data.forEach((item, index, arr) => {
                        MaxArr.push(item.value)
                    })
                    var MaxData = Math.max(...MaxArr)
                    for (let i = 0; i < MaxArr.length; i++) {
                        if (MaxArr[i] == MaxData) {
                            _this.Maxindex = i
                        }
                    }
                    this.dispatchData1 = {
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: _this.Maxindex
                    }
                    this.BorderPieOptionData1 = {
                        title: res.data.data.title,
                        unit: res.data.data.seriesData[0].unit,
                        seriesData: res.data.data.seriesData[0].data,
                        seriesCenter: ['30%', '50%'],
                        right: '2%',
                        color: ['#F4A95B', '#6363FF', '#00BEFC'],
                        pieSelect: true
                    }
                }
            }).catch(err => {
            })
            getCommonData10({busiCode: 'Y004', industryType: this.industryType}).then(res => {
                if (res.data.code === 200) {
                    let MaxArr = []
                    let _this = this
                    res.data.data.seriesData[0].data.forEach((item, index, arr) => {
                        MaxArr.push(item.value)
                    })
                    var MaxData = Math.max(...MaxArr)
                    for (let i = 0; i < MaxArr.length; i++) {
                        if (MaxArr[i] == MaxData) {
                            _this.Maxindex = i
                        }
                    }
                    this.dispatchData2 = {
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: _this.Maxindex
                    }
                    this.BorderPieOptionData2 = {
                        title: res.data.data.title,
                        unit: res.data.data.seriesData[0].unit,
                        seriesData: res.data.data.seriesData[0].data,
                        seriesCenter: ['30%', '50%'],
                        right: '2%',
                        color: ['#FDD230', '#1FFF9E', '#00BDFB', '#0CFCFF'],
                        pieSelect: false
                    }
                }
            }).catch(err => {
            })
        },
        // 2019年企业类别分类
        getindustryData1(busiCode, cylb) {
            getindustryData1(busiCode, cylb).then(res => {
                if (res.data.code === 200) {
                    var MaxArr = []
                    let _this = this
                    res.data.data.seriesData[0].data.forEach((item, index, arr) => {
                        MaxArr.push(item.value)
                    })
                    var MaxData = Math.max(...MaxArr)
                    for (let i = 0; i < MaxArr.length; i++) {
                        if (MaxArr[i] === MaxData) {
                            _this.Maxindex = i
                        }
                    }
                    this.dispatchData = {
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: _this.Maxindex
                    }
                    this.BorderPieOptionData = {
                        title: res.data.data.title,
                        // title:'四上企业数量占比',
                        seriesData: res.data.data.seriesData[0].data,
                        titleText: res.data.data.seriesData[0].data[0].value,
                        color: ['#F4A95B', '#6363FF', '#00BEFC'],
                        seriesCenter: ['50%', '50%'],
                        legendShow: false,
                        right: '999999999999999999%',
                        pieSelect: true
                    }
                }
            }).catch(err => {

            })
        },
        // 重点产业发展现状分析-企业发展
        getindustryData(busiCode, cylb) {
            getindustryData(busiCode, cylb).then(res => {
                if (res.data.code === 200) {
                    this.BlockLineOptionData = {
                        title: res.data.data.title,
                        categoryAxis: res.data.data.categoryAxis,
                        seriesData: res.data.data.seriesData[0].data,
                        unit: res.data.data.seriesData[0].unit, //数据的单位
                        LinearGradientColor: [//柱状图渐变色
                            {
                                topColor: '#47FFBC',
                                bottomColor: '#0DCCFF'
                            },
                        ],
                    }
                }
            }).catch(err => {

            })
        },
        showGraph(name) {
            // this.xmlData = getChainXml(name);
        },
        getCompanyList() {
            getCommonData10({busiCode: 'Y005', industryType: this.industryType, current: this.current}).then(res => {
                if (res.data.code === 200) {
                    this.oprData.tableData = res.data.data.tableData;
                    this.oprData.list = res.data.data.list.records;
                    this.total = res.data.data.list.total;
                }
            }).catch(err => {
                console.log(err);
            });
        },
        currentChange(e) {
            this.current = e
            this.getCompanyList()
        },
        getMapPoint() {
            getCommonData10({busiCode: 'Y008', industryType: this.industryType}).then(res => {
                if (res.data.code === 200) {
                    this.pointList = res.data.data.list
                    this.pointList.map(data => {
                        data.lng = data.longtitude
                        data.lat = data.latitude
                    })
                    console.log('this.pointList', this.pointList)
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.industrial-structure {
    width: 100%;
    height: 100%;

    .titleBox {
        width: 100%;
        height: 10.5vh;
        position: relative;
        margin: 2vh 0;

        .titleLeft {
            width: 43%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: url('~@/assets/images/标题装饰.png') no-repeat 10px center;
            // background-size: 100%;
            transform: rotateY(180deg)
            //background-repeat: repeat-x;
        }

        .titleRight {
            width: 43%;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background: url('~@/assets/images/标题装饰.png') no-repeat 10px center;
            // background-size: 100%;
            //background-repeat: repeat-x;
        }

        .titleCenter {
            // width:30%;
            height: 100%;
            width: 42%;
            margin: 0 auto;
            background: url('../../assets/images/bigBG.png');
            background-size: 100% 100%;
            text-align: center;
            line-height: 10.5vh;
            font-size: 1.15vw;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #DAF1FF;
        }
    }

    .quantity-statistics {
        display: flex;
        justify-content: space-between;

        /deep/ .chart-block {
            width: 30%;
        }
    }
}
</style>
